<template>
  <div class="auth_tree">
    <el-table :data="listData" border style="width: 100%;">
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="性别" prop="sex"></el-table-column>
      <el-table-column label="权限配置">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="opetation(scope.row.auth)">配置</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible" title="配置权限" center width="600px" @close="closeDialog">
      <div class="dialog_main_content">
        <el-tree
          ref="tree"
          :data="treeData"
          :expand-on-click-node="false"
          :show-checkbox="true"
          node-key="id"
          default-expand-all
          @check="currentChecked"
        />
      </div>
      <div class="dialog_footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultExpand: [0],
      listData: [
        {
          id: 1,
          name: "syz",
          sex: "男",
          auth: [1, 2]
        },
        {
          id: 2,
          name: "lyy",
          sex: "女",
          auth: [11, 21]
        },
        {
          id: 3,
          name: "yf",
          sex: "男",
          auth: [211, 212]
        },
        {
          id: 4,
          name: "xkl",
          sex: "女",
          auth: [211]
        },
        {
          id: 5,
          name: "txl",
          sex: "女",
          auth: [221]
        }
      ],
      dialogVisible: false,
      treeData: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 11,
              label: "二级 1-1"
            },
            {
              id: 12,
              label: "二级 1-2"
            }
          ]
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 21,
              label: "二级 2-1",
              children: [
                {
                  id: 211,
                  label: "三级 2-1-1"
                },
                {
                  id: 212,
                  label: "三级 2-1-2"
                }
              ]
            },
            {
              id: 22,
              label: "二级 2-2",
              children: [
                {
                  id: 221,
                  label: "三级 2-2-1"
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    opetation(auth) {
      console.log(auth);
      this.dialogVisible = true;
      const arr = [];
      auth.length &&
        auth.map(({ id, type }) => {
          type == 1 && arr.push(id);
        });
      this.$nextTick(_ => {
        this.$refs.tree.setCheckedKeys(arr);
      });
    },

    // currentChecked(data, currentChecked) {
    //   const { checkedNodes, halfCheckedNodes } = currentChecked;
    //   console.log(checkedNodes, halfCheckedNodes);
    // },

    currentChecked(data, currentChecked) {
      console.log("data", data);
      let auth = [];
      const { checkedNodes, halfCheckedNodes } = currentChecked;
      halfCheckedNodes.length &&
        halfCheckedNodes.forEach(({ id }) => {
          auth.push({
            id,
            type: 2
          });
        });
      checkedNodes.length &&
        checkedNodes.forEach(({ id }) => {
          auth.push({
            id,
            type: 1
          });
        });
      // api 将auth数据保存至后台
    },

    //取消
    cancel() {
      this.dialogVisible = false;
    },

    closeDialog() {
      this.dialogVisible = false;
    },

    //确定
    confirm() {}
  }
};
</script>

<style>
</style>